<template>
   <div class="tmpl">
        <div class="one" >
          <ul class='two' ref="categoryui">
          <li @click="getlists(0)">全部</li>
          <li @click='getlists(item.id)'  v-for="item in lists">{{item.title}}</li>
        </ul>
        </div>
         <div class="imgList">
            <ul>
                <li v-for="item in contents">
                    <router-link  v-bind='{to:"/photo/list/"+item.id}'>
                        <img v-lazy="item.img_url">
                    </router-link>
                    <p>
                        <span class="title" v-text="item.title"></span><br/>
                        {{item.zhaiyao}}
                    </p>
                </li>
            </ul>
        </div>
   </div>
</template>

<style scoped>
  
    .one{
        overflow-x: auto;
        padding: 5px;
    }
    .two{
        margin: 0;
        padding: 0 5px;
        width: 1200px;
    }

    li{
        list-style: none;
        color:#0094ff;
        display: inline;
        padding: 0 5px;
    }

    .imgList ul{
        padding: 2px;
    }

    .imgList img{
        width:100%;
        height: 400px;
    }

    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }

    .imgList li{
        list-style: none;
        position: relative;
    }

    .imgList p{
        color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
    }

    .imgList .title{
        font-weight: bold;
    }
</style>


<script>
      
         import common from '../../tools/common.js';

         import { Indicator } from 'mint-ui';

         export default {

                data(){
                  return {
                    lists:[],
                    contents:[]
                  };
                },

                created(){

                   this.getlist();

                   this.getlists(0);
                },

                methods:{
  
                  getlist(){
                     const url =common.apihost+'api/getimgcategory';

                     this.$http.get(url).then(res=>{
                         this.lists=res.body.message;

                         const owidth=(res.body.message.length+1)*76;

                         this.$refs.categoryui.style.width=owidth+'px';
                     },err=>{
                         console.log(err);
                     })
                  },

                  getlists(id){
                      this.contents=[];
                      const url =common.apihost+'api/getimages/'+id;

                      this.$http.get(url).then(res=>{
                            console.log(123);
                           this.contents=res.body.message;
                      },err=>{
                        console.log(err);
                      })
                  }


                }

         }

</script>